import { Box, Typography } from '@mui/material';
import { useEffect, useState } from 'react';

import PayrollGroupManager, {
    GetPayoutsTodayResponse
} from '../../api/payroll-group/payroll-group-manager';
import UpcomingDisbursementCard from './upcoming-disbursement-card';

export default function UpcomingDisbursements() {
    const [payouts, setPayouts] = useState<Array<GetPayoutsTodayResponse>>();

    useEffect(() => {
        PayrollGroupManager.getPayoutsToday().then((payouts: Array<GetPayoutsTodayResponse>) => {
            setPayouts(payouts);
        });
    }, []);

    return (
        <>
            {payouts && payouts.length > 0 && (
                <>
                    <Box className="d-flex justify-content-between">
                        <Typography variant="h4" sx={{ color: '#BCB6E9', pb: 2 }}>
                            Disbursements Today
                        </Typography>
                    </Box>

                    <Box
                        sx={{ pt: 5, gap: '16px' }}
                        className="d-flex align-items-center flex-wrap"
                    >
                        {payouts.map((payout: GetPayoutsTodayResponse) => {
                            return (
                                <UpcomingDisbursementCard
                                    payout={payout}
                                    key={payout.payrollGroup.id}
                                />
                            );
                        })}
                    </Box>
                </>
            )}
        </>
    );
}
